<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 15:47:05
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-12-17 14:26:58
 * @FilePath: \jzjy\src\views\ResourceCenter\resDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 资源详情页 -->
  <div id="container">
    <div class="top">
      <div class="bread">
        <span class="nowAdreess">当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{
            routeName
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: routeurl+'?from=res'+'&Top=' + gundongTop}" v-if="!isSearch">{{routeName}}</el-breadcrumb-item> -->
          <el-breadcrumb-item :to="{ path: fromPath }" v-if="bigTapName">{{
            bigTapName
          }}</el-breadcrumb-item>
          <!-- 同步资源 -->
          <el-breadcrumb-item :to="{ path: bookurl }" v-if="bookTitle">{{
            bookTitle
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu1url }" v-if="mulu1title">{{
            mulu1title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu2url }" v-if="mulu2title">{{
            mulu2title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu3url }" v-if="mulu3title">{{
            mulu3title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fenleiurl }" v-if="fenleiTitle">{{
            fenleiTitle
          }}</el-breadcrumb-item>
          <!-- 试卷 -->
          <el-breadcrumb-item :to="{ path: sjFlurl }" v-if="sjFlTitle">{{
            sjFlTitle
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: sjNjurl}" v-if="sjNjTitle">{{ sjNjTitle }}年级</el-breadcrumb-item> -->
          <el-breadcrumb-item :to="{ path: sjDqurl }" v-if="sjDqTitle">{{
            sjDqTitle
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: sjNfurl}" v-if="sjNfTitle">{{ sjNfTitle }}年份</el-breadcrumb-item> -->
          <!-- 素材 -->
          <el-breadcrumb-item :to="{ path: scFlurl }" v-if="scFlTitle">{{
            scFlTitle
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: scTimeurl }" v-if="scTimeTitle">{{
            scTimeTitle
          }}</el-breadcrumb-item>

          <el-breadcrumb-item
            ><p>{{ title }}</p></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>

      <div class="beikeziyuan">
        <div class="beike">
          <img
            src="../../assets/img/resFile (1).png"
            alt="file_url"
            v-if="
              suffix == 'ppt' ||
              suffix == 'pptx' ||
              suffix == 'ppsx' ||
              suffix == 'pps'
            "
          />
          <img
            src="../../assets/img/resFile (2).png"
            alt="file_url"
            v-if="suffix == 'mp4' || suffix == 'rm'"
          />
          <img
            src="../../assets/img/resFile (3).png"
            alt="file_url"
            v-if="suffix == 'xls' || suffix == 'xlsx'"
          />
          <img
            src="../../assets/img/resFile (4).png"
            alt="file_url"
            v-if="suffix == 'zip' || suffix == 'rar'"
          />
          <img
            src="../../assets/img/resFile (5).png"
            alt="file_url"
            v-if="suffix == 'm4a' || suffix == 'mp3'"
          />
          <img
            src="../../assets/img/resFile (6).png"
            alt="file_url"
            v-if="suffix == 'doc' || suffix == 'docx'"
          />
          <img
            src="../../assets/img/resFile (7).png"
            alt="file_url"
            v-if="suffix == 'pdf'"
          />
          <img
            src="../../assets/img/resFile (8).png"
            alt="file_url"
            v-if="suffix == 'png' || suffix == 'jpg'"
          />
          <div class="details">
            <div class="title">
              <span v-if="is_tj == 1">推荐</span>
              <img src="../../assets/img/ffzyb/vip.png" v-show="is_sf == 1" >
              <h3>{{ title }}</h3>
              <!-- <div class="money" v-if="is_sf == 0">免费</div>
              <div class="money" v-if="is_sf == 1 && gm_status == 0">
                <img src="../../assets/img/money.png" />付费资源
              </div>
              <div class="money" v-if="is_sf == 1 && gm_status == 1">
                <img src="../../assets/img/money.png" />已解锁
              </div> -->
            </div>
            <div class="msg">
              <div class="intro">
                <p
                  v-html="intro"
                  v-show="suffix != 'zip' && suffix != 'rar'"
                ></p>
                <p
                  v-for="(item, index) in kejianlist"
                  :key="index"
                  v-show="suffix == 'zip' || suffix == 'rar'"
                >
                  {{ item }}
                </p>
              </div>
              <div
                class="tips"
                v-show="suffix == 'zip' || suffix == 'rar'"
                v-if="kejianlist.length > 3"
              >
                ...
              </div>
              <div class="bottom">
                <span class="upTime" v-if="from_int != 10"
                  >更新于{{ update_time }}</span
                >
                <span
                  class="upTime"
                  v-if="from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span>
                <!-- <span class="rate"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="rateValue"></el-rate
                ></span> -->
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ viewCount }}</span
                >
                <span v-if="pswd && mimaShow"
                  >文件编辑密码: {{ pswd }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="collect" v-if="sc_status == 0" @click="getCollect">
          <!-- <i class="el-icon-star-off"></i> -->
          <img src="../../assets/img/weishoucang.png" alt="">
          <p>收藏本资源</p>
        </div>
        <div class="collect getsc" v-if="sc_status == 1" @click="cancelCollect">
          <!-- <i class="el-icon-star-on"></i> -->
          <img src="../../assets/img/yishoucang.png" alt="">
          <p>已收藏</p>
        </div>
        <!-- <div class="pl">
          <img src="../../assets/img/weipinglun.png" alt="">
          <p>写评价 (评价有奖)</p>
        </div> -->
      </div>
    </div>
    <div class="content">
      <div class="left" v-if="!nothingShow">
        <div class="pptTop">
          <span>资源预览</span>
          <div class="progress">{{ pic_id + 1 }}/{{ p_nums }}页</div>
        </div>
        <div class="pptLeft">
          <div class="smallPic">
            <div
              class="pics"
              :class="{ choseImg: pic_id == index }"
              v-for="(item, index) in file_lists"
              :key="item.id"
              @click="chosePic(index)"
            >
              <img :src="item.ico_url" />
            </div>
          </div>
        </div>
        <div class="pptRight" @contextmenu.prevent="menuPlayer()">
          <div class="bigPic" v-for="item in file_lists" :key="item.id">
            <img
              :src="item.file_url"
              alt=""
              v-if="
                item.file_ext == 'png' ||
                item.file_ext == 'jpg' ||
                item.file_ext == 'doc' ||
                item.file_ext == 'png' ||
                item.file_ext == 'docx' ||
                item.file_ext == 'xls' ||
                item.file_ext == 'pdf' ||
                item.file_ext == 'xlsx' ||
                item.file_ext == 'webp'
              "
            />
            <video
              muted="muted"
              class="video"
              :src="item.file_url"
              height="448px"
              width="700px"
              type="video/mp4"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              v-if="item.file_ext == 'mp4' || item.file_ext == 'rm'"
            ></video>
            <div
              class="mp3File"
              v-if="item.file_ext == 'mp3' || item.file_ext == 'm4a'"
            >
              <img
                src="../../assets/img/resFile (5).png"
                alt=""
                style="width: 74px"
              />
              <p>{{ item.title }}</p>
              <audio :src="item.file_url" controls></audio>
            </div>
          </div>
          <div class="mohu" style="position:relative;"><div class="jindu" style="bottom:0px"></div></div>
          <p class="jindutext">已预览{{ v_per }}%，完整内容可下载后查看哦！</p>
          <div class="downlond">
            <span>{{ title }}</span>
            <!-- <div class="fufei" v-if="is_sf == 1">
              <span>所属服务包：</span>
              <div class="baoLists">
                <p v-for="item in goods_lists" :key="item.goods_id">
                  {{ item.goods_title }}
                </p>
              </div>
            </div> -->
            <div class="downFile" @click="downLoad">下载资源</div>
          </div>
        </div>
      </div>
      <div class="left noFile" v-if="nothingShow">
        <div class="pptTop">
          <span>资源预览</span>
          <div class="progress">{{ pic_id + 1 }}/{{ p_nums }}页</div>
        </div>
        <p>当前文件暂无法提供预览，请您下载后查看</p>
        <div class="downlond">
          <span>{{ title }}</span>
          <div class="downFile" @click="downLoad">下载资源</div>
        </div>
      </div>
      <div class="right">
        <div class="righttop">
          <div class="title2">
            <span></span>
            <h2>更多资源推荐</h2>
          </div>
          <div id="box" v-for="item in tjkejian" :key="item.id"
            @click="goresDetails(item.id, item.lx, item.suffix)"
            v-show="!notshijuan"
          >
            <img
              src="../../assets/img/ziyuan.png"
              v-if="item.lx == 2"
              style="height: auto"
            />
            <img
              src="../../assets/img/resFile (1).png"
              alt="file_url"
              v-if="
                item.suffix == 'ppt' ||
                item.suffix == 'pptx' ||
                item.suffix == 'ppsx' ||
                item.suffix == 'pps'
              "
            />
            <img
              src="../../assets/img/resFile (2).png"
              alt="file_url"
              v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
            />
            <img
              src="../../assets/img/resFile (3).png"
              alt="file_url"
              v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
            />
            <img
              src="../../assets/img/resFile (4).png"
              alt="file_url"
              v-if="item.suffix == 'zip' || item.suffix == 'rar'"
            />
            <img
              src="../../assets/img/resFile (5).png"
              alt="file_url"
              v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
            />
            <img
              src="../../assets/img/resFile (6).png"
              alt="file_url"
              v-if="item.suffix == 'doc' || item.suffix == 'docx'"
            />
            <img
              src="../../assets/img/resFile (7).png"
              alt="file_url"
              v-if="item.suffix == 'pdf'"
            />
            <img
              src="../../assets/img/resFile (8).png"
              alt="file_url"
              v-if="item.suffix == 'png' || item.suffix == 'jpg'"
            />
            <div class="msg">
              <div class="title">
                <img
                  src="../../assets/img/newBiaoqian.png"
                  v-show="item.is_new == 1"
                />{{ item.title }}
              </div>
              <!-- <p
                v-html="item.sub_info"
                v-if="item.lx == 2"
                style="height: 47px"
              ></p>
              <p v-if="!item.lx || item.lx == 1" style="height: 47px">
                {{ item.intro == "" ? "暂无" : item.intro }}
              </p> -->
              <div class="bottom">
                <span class="upTime" v-if="item.from_int != 10">
                  更新于{{ timeStamp2String(item.update_time * 1000, 2) }}
                </span>
                <span
                  class="upTime"
                  v-if="item.from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span>
                <!-- <span class="rate"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="item.tjzs"></el-rate
                ></span> -->
                <span class="seeNum" v-if="!item.lx || item.lx == 1"
                  ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                >
                <span class="seeNum" v-if="item.lx == 2"
                  ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                >
              </div>
            </div>
          </div>
          <div class="cannotsee" v-show=" notshijuan">
            <img src="../../assets/img/cannotsee.png" alt="">
            <p>试卷为保密资源，暂不提供预览</p>
          </div>
        </div>
        <div class="rightbottom" v-if="loginStatus == 1 && book_title">
          <div class="title2">
            <span></span>
            <h3>相关推荐</h3>
          </div>
          <div class="box">
            <div class="pic">
              <img :src="book_file_url" alt="" />
            </div>
            <h3>{{ book_title }}</h3>
            <p>
              {{ synopsis }}
            </p>
            <span @click="seebook">查看样书</span>
          </div>
        </div>
      </div>
    </div>

    <div class="guanggao" v-if="bannerList.length > 0">
      <div class="banner">
        <el-carousel height="160px" indicator-position="none" arrow="never">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div
      class="guanggao"
      v-if="bannerList.length <= 0"
      style="background: #f0f0f5; height: 40px"
    ></div>
    <!-- 评论内容列表 -->
    <!-- <div class="pinglun">
      <div class="plTop">
        <h4>用户评价：</h4>
        <div class="xie">
          <span>写评价</span>
          <img src="../../assets/img/pingjiayoujiang.png" alt="">
        </div>
      </div>
      <div class="plLists" v-if="pl_count>0">
        <div class="list" v-for="item in pl_list" :key="item.id" >
          <div class="tec">
            <div class="tx">
              <img :src="item.file_url" alt="">
            </div>
            <div class="msg">
              <h4>{{item.true_name}}</h4>
              <div class="rate">
                <span><el-rate disabled v-model="item.score"></el-rate></span>
                <div class="riqi">{{timeStamp2String(item.create_time*1000,2)}}</div>
              </div>
            </div>
          </div>
          <div class="msgcnt">
            <p>{{item.content}}</p>
          </div>
        </div>
        
      </div>
      <div class="nopl" v-if="pl_count > 0">
          <img src="../../assets/img/nothing.png" alt="">
          <p>暂无评论</p>
        </div>
    </div> -->
    <!-- 下载登录弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      custom-class="login"
    >
      <LoginTc />
    </el-dialog>
    <!-- 付费资源包解锁弹窗 -->
    <div class="Gmoney">
      <el-dialog
        :visible.sync="dialogVisible_fufei"
        width="1000px"
        :before-close="fufeiClose"
        custom-class="moneyBox"
      >
        <h2>当前资源为<a>付费资源</a> ，需购买服务包后才可下载</h2>
        <div class="fangshi">
          <div class="left">
            <div class="pic">
              <img :src="xitongMsg.kf_file_url" alt="" />
            </div>
            <h4>添加客服免费领取试看</h4>
            <p><a>*</a>每位用户可领取一次</p>
          </div>
          <div class="center">
            <div class="top">
              <img src="../../assets/img/jiesuo_money.png" alt="" />
              <h3>下载解锁</h3>
            </div>
            <p>购买服务包后，包内所有资源都可以全部解锁，且可永久使用~</p>
            <a>查看资源包详情</a>
            <div class="moneyJs">购买服务包</div>
          </div>
          <div class="right">
            <div class="top">
              <img src="../../assets/img/jiesuo_number.png" alt="" />
              <h3>兑换码解锁</h3>
            </div>
            <p>已有兑换码老师可使用此方式进行解锁</p>
            <div class="numberJs" @click="dialogVisible_duihuan = true">
              输入兑换码
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 兑换码输入解锁框 -->
    <div class="duihuan">
      <el-dialog
        :visible.sync="dialogVisible_duihuan"
        width="360px"
        :before-close="duihuanClose"
        custom-class="duihuan"
      >
        <h2>兑换码解锁</h2>
        <div class="shuru">
          <input type="text" v-model="jsm" placeholder="请输入解锁兑换码" />
        </div>
        <div class="sureJs" @click="jsmJs">确认解锁</div>
      </el-dialog>
    </div>
    <!-- 下载完成后未添加企业微信的弹窗 -->
    <downEvmTc
      v-if="downQwShow"
      :zykf_file_url="zykf_file_url"
      :xzMsg="xzMsg"
      @qwtcClose="qwtcClose"
    ></downEvmTc>
    <!-- 限制下载条数的弹窗 -->
    <xzxxTc
      v-if="xzxxShow"
      :zykf_file_url="zykf_file_url"
      @xzxxClose="xzxxClose"
    ></xzxxTc>
    <!-- 限制下载条数的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="true"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
    <!-- 更新提醒弹窗 -->
    <gxtxTc
      v-if="gxtxShow"
      @gxtcClose="gxtcClose"
      :zykf_file_url="gxkf_file_url"
    >
    </gxtxTc>
  </div>
</template>
<script>
import LoginTc from "../../layout/components/loginTc.vue";
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
import { timeStamp2String } from "../../utils/time";
import xzxxTc from "../../components/xzxzTc/xzxzTc.vue";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import gxtxTc from "../../components/gxtxTc/gxtx.vue"
import {
  islogin,
  info_kejian,
  url_kejian,
  tjkejian,
  userinfo,
  banner,
  getbookbyresource,
  create_accountzysc,
  wxdlewm,
  upwxdl,
  sy_goodsjsm,
  qywx_status,
  download_nums,
  ffzyb_status,
  getgoodsweekpopup,
  closepopup,
  page_times,
  sysinfo,
  getgoodsbykejian,
  getgmstatusbykejian,
  getkfinfobyip,
  getgoodscommentlist,
  addgoodscomment,
  updategoodscomment,
  getgroupbuyuserinfo
} from "../../api/http";
export default {
  inject: ["reload"], //刷新页面
  props: ["xitongMsg", "kefuMsg"],
  components: {
    LoginTc,
    downEvmTc,
    xzxxTc,
    fwbtj,
    wtzxTc,
    gxtxTc
  },
  data() {
    return {
      lala:3,
      gundongTop: 0, //资源中心跳转过来时的滚动条高度
      timeStamp2String,
      kejianid: "", //当前需要展示的课件id
      bread_title: "", //面包屑的详情资源名称
      suffix: "", //课件类型
      is_tj: 0, //是否为推荐
      title: "", //课件的标题
      intro: "", //课件的简介
      from_int: "", //判断是否为精选
      update_time: "", //更新时间
      viewCount: 0, //浏览人数
      file_lists: [], //图片列表
      kejianlist: [], //如果是压缩包，展示在简介位置的课件标题列表
      nothingShow: false,
      v_nums: 0, //可预览页数
      p_nums: 0, //总页数
      pic_id: 0, //当前点击的小图片id
      tjkejian: [], //推荐的课件列表
      v_per: 0, //预览进度
      nianji_ids: "", //年级id
      kemu_ids: "", //科目id
      bannerList: [], //广告图列表

      //资源详情页推荐图书
      book_file_url: "", //图书封面
      author: "", //作者
      synopsis: "", //图书简介
      book_title: "", //图书标题

      sc_status: "", //是否收藏
      dialogVisible: false, //登录弹窗展示
      loginEvm: "", //扫码登陆二维码
      evmTimer: null, //扫码状态获取计时器
      rateValue: "", //课件评分
      loginStatus: "", //登录状态

      //是否是搜索页跳转来的
      isSearch: false,

      // query参数相关
      bigTap: "", //同步资源主页传的大菜单值
      bigTapName: "", //同步资源跳转过来的大菜单名称
      fromPath: "", //跳转过来的路径
      routeurl: "", //路径
      routeName: "", //路径名

      bookTitle: "", //
      bookurl: "", //图书名
      mulu1title: "", //一级目录名
      mulu1url: "", //一级目录同步地址
      mulu2title: "", //二级目录名
      mulu2url: "", //二级目录同步地址
      mulu3title: "", //三级目录名
      mulu3url: "", //三级目录同步地址
      fenleiTitle: "", //分类名
      fenleiurl: "", //分类同步地址

      sjFlTitle: "", //试卷分类名
      sjFlurl: "", //试卷分类地址
      sjNjTitle: "", //试卷年级名
      sjNjurl: "", //试卷年级地址
      sjDqTitle: "", //试卷地区名
      sjDqurl: "", //试卷地区地址
      sjNfTitle: "", //试卷年份名
      sjNfurl: "", //试卷年份地址

      scFlTitle: "", //素材分类名
      scFlurl: "", //素材分类地址
      scTimeTitle: "", //素材时间名
      scTimeurl: "", //素材时间值地址

      is_sf: "", //是否收费
      is_pay:'',//是否支付
      gm_status: "", //是否购买
      gm_status2: "", //是否购买

      goods_lists: [], //商品列表
      dialogVisible_fufei: false, //付费弹窗展示
      dialogVisible_duihuan: false, //兑换码弹窗展示
      jsm: "", //解锁码兑换码

      downQwShow: false,//下载完成弹窗展示隐藏
      zykf_file_url: "", //资源客服二维码
      xzMsg:{is_qw:'',type_id:'',baotype:'',kemu_id:'',nianji_id:'',},//下载完成弹窗所需相关

      pswd: "", //文件编辑密码

      xzxxShow: false, //限制下载条数弹窗

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id

      gxtxShow:false,//更新提醒弹窗展示
      gxkf_file_url:'',//售后客服

      goods_id:'',//商品id

      pageTimer:null,//上报停留时长

      notshijuan:false,//试卷不可查看

      pl_page_size:3,//评论的展示数量
      pl_count:'',//评论数量
      last_score:'',//总评分
      pl_list:[],//评论列表

      account:'',//用户下载时需要的用户账号

      mimaShow:false,//是否可下载资源、是否展示文件编辑密码

      is_free:'',//包是否收费
    };
  },
  created() {
    console.log(this.$route.query, "query参数");
    if (this.$route.query.path) {
      localStorage.setItem("path", this.$route.query.path);
      this.routeName = this.$route.query.routeName;
      this.routeurl = this.$route.query.path;
      this.$emit("pathpath", this.routeurl);
    }

    if (this.$route.query.isFree && this.$route.query.isFree == 1){
      this.is_free = this.$route.query.isFree;
    }
    
    this.bigTap = this.$route.query.bigTap;
    this.gundongTop = this.$route.query.gundongTop;
    this.kejianid = this.$route.query.id; //课件id
    this.fromPath = this.$route.query.path
      ? this.$route.query.path +
        "?from=res" +
        "&Top=" +
        this.gundongTop +
        "&bigTap=" +
        this.bigTap +
        "&page=" +
        this.$route.query.page +
        "&pageSize=" +
        this.$route.query.pageSize
      : ""; //跳转过来的页面路径
    //是否是搜索页 或首页跳转来的
    if (
      this.$route.query.path == "/" ||
      this.$route.query.path == "/resourceJx" ||
      this.$route.query.isSearch
    ) {
      this.routeurl = this.$route.query.path;
      this.isSearch = 1;
    } else if (this.$route.query.bigTap) {
      this.bigTapName = this.$route.query.bigTapName
        ? this.$route.query.bigTapName
        : ""; //跳转过来的大菜单名称
      this.bookTitle = this.$route.query.bookTitle
        ? this.$route.query.bookTitle
        : ""; //跳转过来的图书名
      this.mulu1title = this.$route.query.mulu1title
        ? this.$route.query.mulu1title
        : ""; //跳转过来的一级目录名
      this.mulu2title = this.$route.query.mulu2title
        ? this.$route.query.mulu2title
        : ""; //跳转过来的二级目录名
      this.mulu3title = this.$route.query.mulu3title
        ? this.$route.query.mulu3title
        : ""; //跳转过来的三级目录名
      this.fenleiTitle = this.$route.query.fenleiTitle
        ? this.$route.query.fenleiTitle
        : ""; //跳转过来的分类名
      this.sjFlTitle = this.$route.query.sjFlTitle
        ? this.$route.query.sjFlTitle
        : ""; //跳转过来的试卷分类名
      this.sjNjTitle = this.$route.query.sjNjTitle
        ? this.$route.query.sjNjTitle
        : ""; //跳转过来的试卷年级名
      this.sjDqTitle = this.$route.query.sjDqTitle
        ? this.$route.query.sjDqTitle
        : ""; //跳转过来的试卷地区名
      this.sjNfTitle = this.$route.query.sjNfTitle
        ? this.$route.query.sjNfTitle
        : ""; //跳转过来的试卷年份名
      this.scFlTitle = this.$route.query.scFlTitle
        ? this.$route.query.scFlTitle
        : ""; //跳转过来的素材分类名
      this.scTimeTitle = this.$route.query.scTimeTitle
        ? this.$route.query.scTimeTitle
        : ""; //跳转过来的素材时间名
      this.bookurl =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部";
      this.mulu1url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title;
      this.mulu2url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title;
      this.mulu3url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title +
        "&mulu3id=" +
        this.$route.query.mulu3id +
        "&mulu3title=" +
        this.$route.query.mulu3title;
      this.fenleiurl =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        this.$route.query.feleiDid +
        "&fenleiTitle=" +
        this.$route.query.fenleiTitle +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title +
        "&mulu3id=" +
        this.$route.query.mulu3id +
        "&mulu3title=" +
        this.$route.query.mulu3title;
      this.sjFlurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        "" +
        "&sjNjTitle=" +
        "全部" +
        "&sjDqId=" +
        "" +
        "&sjDqTitle=" +
        "" +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjNjurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        "" +
        "&sjDqTitle=" +
        "" +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjDqurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        this.$route.query.sjDqId +
        "&sjDqTitle=" +
        this.$route.query.sjDqTitle +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjNfurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        this.$route.query.sjDqId +
        "&sjDqTitle=" +
        this.$route.query.sjDqTitle +
        "&sjNfId=" +
        this.$route.query.sjNfId +
        "&sjNfTitle=" +
        this.$route.query.sjNfTitle;
      this.scFlurl =
        this.fromPath +
        "&scFlId=" +
        this.$route.query.scFlId +
        "&scFlTitle=" +
        this.$route.query.scFlTitle +
        "&scTimeId=" +
        "" +
        "&scTimeTitle=" +
        "全部";
      this.scTimeurl =
        this.fromPath +
        "&scFlId=" +
        this.$route.query.scFlId +
        "&scFlTitle=" +
        this.$route.query.scFlTitle +
        "&scTimeId=" +
        this.$route.query.scTimeId +
        "&scTimeTitle=" +
        this.$route.query.scTimeTitle;
    }

    //判断是否登录
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res.retRes.login_status, "是否登录");
      this.loginStatus = res.retRes.login_status;
      if (this.loginStatus == 1) {
        //获取个人信息拿取广告图
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          console.log(res, "个人信息");
          const data = res.retRes;
          this.nianji_ids = data.nianji_id;
          this.account = data.account;
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            if (res.retInt == 1) {
              if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
                this.$router.push({
                  name: "Login",
                  query: {
                    isgq: 1,
                  },
                });
              } else {
                console.log(res, "课件详情");
                const data = res.retRes;
                (this.kemu_ids = data.kemu_id), (this.bread_title = data.title);
                this.xzMsg.kemu_id = data.kemu_id
                this.suffix = data.suffix;
                if(this.suffix === "zip" || this.suffix === "rar"){
                  this.$router.push({
                    name: "ZipResDetails",
                    query: {
                      id: this.kejianid,
                      isFree:this.is_free == 1?this.is_free:0
                    },
                  })
                }
                this.title = data.title;
                this.intro = data.intro == "" ? "暂无简介" : data.intro;
                this.from_int = data.from_int;
                this.update_time = timeStamp2String(data.update_time * 1000, 2);
                this.viewCount = data.viewCount;
                this.file_lists = data.file_lists;
                this.sc_status = data.sc_status;
                this.rateValue = data.tjzs;
                this.is_sf = data.is_sf;
                this.xzMsg.type_id = data.type_id;
                if(data.nianji_lists.length && data.nianji_lists.length == 1){
                  this.xzMsg.nianji_id = data.nianji_id;
                }else{
                  this.xzMsg.nianji_id = this.nianji_ids;
                }
                
                this.is_pay = data.is_pay;
                // this.goods_lists = data.goods_lists;
                // if(data.goods_lists.length!=0){
                //   this.goods_id = data.goods_lists[0].goods_id;
                // }
                getgoodsbykejian({
                  md5key: localStorage.getItem("md5key"),
                  type:1,
                  id:this.$route.query.id,
                }).then(res=>{
                  console.log(res,"xin 商量列表")
                  if (res.retRes.length != 0) {
                    this.goods_lists = res.retRes;
                    this.goods_id = res.retRes[0].goods_id;
                    this.xzMsg.id = res.retRes[0].goods_id;
                    // this.getgoodscommentlist()
                  }
                })
                getgmstatusbykejian({
                  md5key: localStorage.getItem("md5key"),
                  type:1,
                  id:this.$route.query.id,
                  goods_type:this.xzMsg.type_id == 1?3:this.xzMsg.type_id == 2?2:1,
                  nianji_id:this.xzMsg.nianji_id
                }).then(res=>{
                  console.log(res,"付费包支付状态")
                  const bmsg = res.retRes;
                  //如果是非课件试卷资源 且尊享包未购买全学年
                  if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 0){
                    this.xzMsg.baotype = 1;//推尊享包
                  //如果是非课件试卷资源 且尊享包已购买全学年
                  }else if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 1){
                    this.xzMsg.baotype = 0;//推尊图书
                  //如果是试卷资源 且试卷包未购买全学年
                  }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 0){
                    this.xzMsg.baotype = 2;//推尊图书
                  //如果是试卷资源 且试卷包已购买全学年 且尊享包未购买全学年
                  }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
                    this.xzMsg.baotype = 1;//推尊享包
                  //如果是试卷资源 且试卷包已购买全学年 且尊享包已购买全学年
                  }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
                    this.xzMsg.baotype = 0;//推尊图书
                  //如果是课件资源 且课件包未购买全学年
                  }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 0){
                    this.xzMsg.baotype = 3;//推尊课件
                  //如果是课件资源 且课件包已购买全学年 且尊享包未购买全学年
                  }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
                    this.xzMsg.baotype = 1;//推尊享包
                  //如果是课件资源 且课件包已购买全学年 且尊享包已购买全学年
                  }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
                    this.xzMsg.baotype = 0;//推尊图书
                  }
                })
                this.gm_status = data.gm_status;
                this.gm_status2 = data.gm_status2;
                this.pswd = data.pswd;
                if (data.file_lists.length == 0) {
                  this.nothingShow = true;
                } else {
                  this.nothingShow = false;
                }

                if(this.is_sf == 1 && (this.gm_status != 1 || this.is_pay !=1) && res.retRes.type_id == 2 && res.retRes.is_new == 1){
                  this.notshijuan = true
                }else{
                  this.notshijuan = false
                }
                this.v_per = data.v_per;
                this.v_nums = data.v_nums;
                this.p_nums = data.p_nums;
                this.kejianlist = [];
                if (this.suffix == "zip" || this.suffix == "rar") {
                  this.file_lists.forEach((item) => {
                    this.kejianlist.push(item.group_title);
                  });
                  this.kejianlist = Array.from(new Set(this.kejianlist));
                  console.log(this.kejianlist, "抽出来的所有课件标题");
                }

                //获取详情页广告图
                banner({
                  md5key: localStorage.getItem("md5key"),
                  systypes_id: 10004,
                  device_type_id: 201,
                  nianji_ids: this.nianji_ids,
                  kemu_ids: this.kemu_ids,
                }).then((res) => {
                  console.log(res, "资源详情页广告图");
                  this.bannerList = res.retRes;
                });
                //获取资源页详情推荐图书
                getbookbyresource({
                  md5key: localStorage.getItem("md5key"),
                  kemu_id: this.kemu_ids,
                }).then((res) => {
                  console.log(res, "资源详情页推荐图书");
                  const data = res.retRes;
                  this.book_file_url = data[0].file_url;
                  this.book_title = data[0].title;
                  this.synopsis = data[0].synopsis;
                  this.book_id = data[0].id;
                });
              }
            }
          });
        });
        getgoodsweekpopup({
          md5key: localStorage.getItem("md5key"),
        }).then(res=>{
          if(res.retRes == 1){
            this.gxtxShow = true
            this.gxkf_file_url = this.kefuMsg.qwkf_file_url
          }
        })
        getgroupbuyuserinfo({
          md5key: localStorage.getItem("md5key"),
          phone:this.account,
          row_id:this.kejianid,
          nr_type_id:2,
        }).then(res=>{
          if(res.retRes.is_imp && res.retRes.is_imp == 1){
              this.mimaShow = true
          }else{
            if (this.loginStatus == 1 && this.is_sf == 0) {
              this.mimaShow = true
            } else if (
              this.loginStatus == 1 &&
              this.is_sf == 1 &&
              (this.gm_status == 0 || this.is_pay !=1)
            ) {
              this.mimaShow = false
            } else if (
              this.loginStatus == 1 &&
              this.is_sf == 1 &&
              this.gm_status == 1 &&
              this.is_pay == 1
            ) {
              this.mimaShow = true
            }
          }
          console.log(this.mimaShow)
        })
      } else {
        info_kejian({
          md5key: localStorage.getItem("md5key"),
          id: this.kejianid,
        }).then((res) => {
          if (res.retInt == 1) {
            if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
              this.$router.push({
                name: "Login",
                query: {
                  isgq: 1,
                },
              });
            } else {
              console.log(res, "课件详情");
              const data = res.retRes;
              (this.kemu_ids = data.kemu_id), (this.bread_title = data.title);
              this.xzMsg.kemu_id = data.kemu_id
              this.suffix = data.suffix;
              if(this.suffix === "zip" || this.suffix === "rar"){
                this.$router.push({
                  name: "ZipResDetails",
                  query: {
                    id: this.kejianid,
                    isFree:this.is_free == 1?this.is_free:0
                  },
                })
              }
              this.title = data.title;
              this.intro = data.intro == "" ? "暂无简介" : data.intro;
              this.from_int = data.from_int;
              this.update_time = timeStamp2String(data.update_time * 1000, 2);
              this.viewCount = data.viewCount;
              this.file_lists = data.file_lists;
              this.sc_status = data.sc_status;
              this.rateValue = data.tjzs;
              this.is_sf = data.is_sf;
              this.xzMsg.type_id = data.type_id;
              this.xzMsg.nianji_id = data.nianji_id;
              this.is_pay = data.is_pay;
              // this.goods_lists = data.goods_lists;
              // if(data.goods_lists.length!=0){
              //   this.goods_id = data.goods_lists[0].goods_id;
              // }
              getgoodsbykejian({
                md5key: localStorage.getItem("md5key"),
                type:1,
                id:this.$route.query.id,
              }).then(res=>{
                console.log(res,"xin 商量列表")
                if (res.retRes.length != 0) {
                  this.goods_lists = res.retRes;
                  this.goods_id = res.retRes[0].goods_id;
                  this.xzMsg.id = res.retRes[0].goods_id;
                }
              })
              // getgmstatusbykejian({
              //   md5key: localStorage.getItem("md5key"),
              //   type:1,
              //   id:this.$route.query.id,
              //   goods_type:this.xzMsg.type_id == 1?3:this.xzMsg.type_id == 2?2:1,
              //   nianji_id:this.xzMsg.nianji_id
              // }).then(res=>{
              //   console.log(res,"付费包支付状态")
              //   const bmsg = res.retRes;
              //   //如果是非课件试卷资源 且尊享包未购买全学年
              //   if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 0){
              //     this.xzMsg.baotype = 1;//推尊享包
              //   //如果是非课件试卷资源 且尊享包已购买全学年
              //   }else if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 1){
              //     this.xzMsg.baotype = 0;//推尊图书
              //   //如果是试卷资源 且试卷包未购买全学年
              //   }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 0){
              //     this.xzMsg.baotype = 2;//推尊图书
              //   //如果是试卷资源 且试卷包已购买全学年 且尊享包未购买全学年
              //   }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
              //     this.xzMsg.baotype = 1;//推尊享包
              //   //如果是试卷资源 且试卷包已购买全学年 且尊享包已购买全学年
              //   }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
              //     this.xzMsg.baotype = 0;//推尊图书
              //   //如果是课件资源 且课件包未购买全学年
              //   }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 0){
              //     this.xzMsg.baotype = 3;//推尊课件
              //   //如果是课件资源 且课件包已购买全学年 且尊享包未购买全学年
              //   }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
              //     this.xzMsg.baotype = 1;//推尊享包
              //   //如果是课件资源 且课件包已购买全学年 且尊享包已购买全学年
              //   }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
              //     this.xzMsg.baotype = 0;//推尊图书
              //   }
              // })
              this.pswd = data.pswd;
              this.gm_status = data.gm_status;
              this.gm_status2 = data.gm_status2;
              if (data.file_lists.length == 0) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
              this.v_per = data.v_per;
              this.v_nums = data.v_nums;
              this.p_nums = data.p_nums;
              this.kejianlist = [];
              if (this.suffix == "zip" || this.suffix == "rar") {
                this.file_lists.forEach((item) => {
                  this.kejianlist.push(item.group_title);
                });
                this.kejianlist = Array.from(new Set(this.kejianlist));
                console.log(this.kejianlist, "抽出来的所有课件标题");
              }
            }
          }
        });
      }
    });

    //将储存修改为资源中心
    // localStorage.setItem("path", 1);
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });

    //根据课件id来推荐的右侧课件列表
    tjkejian({
      md5key: localStorage.getItem("md5key"),
      id: this.kejianid,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "推荐的课件列表");
        this.tjkejian = res.retRes;
      }
    });
  },
  mounted() {
     //上报资源页停留
     page_times({
      table_name: "kejian",
      row_id: this.kejianid,
      times: 1,
    });
    //获取系统信息里的上报时长
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      const times = res.retRes.page_times2;
      //上报停留时长
      this.pageTimer = setInterval(() => {
        page_times({
          table_name: "kejian",
          row_id: this.kejianid,
          times: times,
        });
      }, times * 1000);
    });




    
    
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    //获取资源评论列表
    getgoodscommentlist(){
      getgoodscommentlist({
        md5key: localStorage.getItem("md5key"),
        goods_id:1,
        goodsspec_id:'',
        goodsweek_id:'',
        page:1,
        page_size:this.pl_page_size,
      }).then(res=>{
        console.log(res)
        this.pl_count = res.retRes.count;
        this.last_score = res.retRes.last_score;
        if(res.retRes.count >0){
          this.pl_list = res.retRes.list
        }
      })
    },
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //关闭更新弹窗
    gxtcClose(){
      this.gxtxShow = false
      closepopup({
        md5key: localStorage.getItem("md5key"),
      })
    },
    //去预约
    goyuyue(id,goodsweek_id){
      page_times({
        table_name: "goods_ckdj",
        row_id: this.goods_id,
        table_name_p:'kejian',
        row_id_p:this.kejianid
      });
      console.log(id,this.kemu_ids)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            goodsweek_id:goodsweek_id,
            kemu_id:this.kemu_ids,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id,goodsweek_id){
      this.choseGoodId = id
      console.log(goodsweek_id,"ceshiceshi ")
    },
    //点击商品咨询按钮
    zixun(){
      page_times({
        table_name: "goods_zxdj",
        row_id: this.goods_id,
        table_name_p:'kejian',
        row_id_p:this.kejianid
      });
      console.log(123)
      this.fwbtjShow = false
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        this.zykf1_file_url = res.retRes.local_zxkf_info.file_url
      });
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      this.fwbtjShow = true
    },
    //收藏
    getCollect() {
      const ids = [];
      ids.push(this.kejianid);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //取消收藏
    cancelCollect() {
      const ids = [];
      ids.push(this.kejianid);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //点击查看样书
    seebook() {
      this.$router.push({
        name: "ProductDetails",
        query: {
          id: this.book_id,
        },
      });
    },
    menuPlayer() {
      console.log("禁止右键");
    },
    //监听滚动事件
    handleScrollY() {
      if (
        this.nothingShow == false &&
        this.suffix != "mp3" &&
        this.suffix != "m4a"
      ) {
        const pptLeft = document.getElementsByClassName("pptLeft")[0]; //需要指定的最左侧小预览图
        const smallPic = document.getElementsByClassName("smallPic")[0]; //需要指定的最左侧小预览图
        const downFile = document.getElementsByClassName("downFile")[0]; //下载
        const pptTop = document.getElementsByClassName("pptTop")[0]; //左侧顶部资源预览进度展示
        const righttop = document.getElementsByClassName("righttop")[0]; //右侧更多资源推荐
        const rightbottom = document.getElementsByClassName("rightbottom")[0]; //右侧相关推荐
        const guanggao = document.getElementsByClassName("guanggao")[0]; //底部广告图
        const left = document.getElementsByClassName("left")[0]; //整个左侧
        // const gundong = document.documentElement.scrollTop
        // console.log(document.documentElement.scrollTop)
        // console.log(pptLeft.getBoundingClientRect().top,123)
        if (pptLeft.getBoundingClientRect().top < 100) {
          smallPic.style.position = "fixed";
          smallPic.style.top = "120px";
          pptTop.style.position = "fixed";
          pptTop.style.top = "80px";
        } else if (pptLeft.getBoundingClientRect().top > 100) {
          smallPic.style.position = "static";
          smallPic.style.top = "0px";
          pptTop.style.position = "static";
          pptTop.style.top = "0px";
        }
        // console.log(rightbottom)
        if(rightbottom){
          if (
            righttop.getBoundingClientRect().bottom < 100 &&
            this.file_lists.length > 3
          ) {
            rightbottom.style.position = "fixed";
            rightbottom.style.top = "80px";
          } else if (
            righttop.getBoundingClientRect().bottom > 100 &&
            this.file_lists.length > 3
          ) {
            rightbottom.style.position = "static";
            rightbottom.style.top = "0px";
          } else {
            rightbottom.style.position = "static";
            rightbottom.style.top = "0px";
          }
        }
        // console.log(guanggao.getBoundingClientRect().top-document.documentElement.clientHeight)
        // console.log(guanggao.getBoundingClientRect().top - smallPic.getBoundingClientRect().bottom)
        const picHeight =
          guanggao.getBoundingClientRect().top -
          smallPic.getBoundingClientRect().bottom; //广告和预览图之间的距离
        if(rightbottom){
            const proHeight =
            guanggao.getBoundingClientRect().top -
            rightbottom.getBoundingClientRect().bottom; //广告右侧产品推荐之间的距离
            if (proHeight < 0) {
                rightbottom.style.top = 60 + proHeight + "px";
            }
          }
        if (picHeight < 0) {
          smallPic.style.top = 100 + picHeight + "px";
        }
        if (downFile.getBoundingClientRect().top < 586) {
          // smallPic.style.position = "static";
          // smallPic.style.top = "0px";
          // pptTop.style.position = "static";
          // pptTop.style.top = "0px";
          // rightbottom.style.position = "static";
          // rightbottom.style.top = "0px";
        }
      } else {
        const downlond = document.getElementsByClassName("downlond")[0]; //下载按钮
        const rightbottom = document.getElementsByClassName("rightbottom")[0]; //右侧相关推荐
        if (
          rightbottom.getBoundingClientRect().bottom >
          document.body.clientHeight
        ) {
          downlond.style.position = "fixed";
          downlond.style.bottom = "0px";
        } else {
          downlond.style.position = "absolute";
          downlond.style.bottom = "0px";
        }
      }
      //滚动时左右对应
      const scrollItems = document.querySelectorAll(".bigPic");
      const smallPic = document.querySelectorAll(".smallPic")[0];
      const smallItems = document.querySelectorAll(".pics");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        if (scrollItems[i].getBoundingClientRect().top < 350) {
          // console.log(i);
          setTimeout(() => {
            this.pic_id = i;
          }, 100);
          // console.log(smallItems[i].offsetTop > window.innerHeight/2,"就是")
          // if (smallItems[i].offsetTop > window.innerHeight / 2) {
          //   // smallItems[i].scrollTop = 1000
          //   smallPic.scrollTop =
          //     smallItems[i].offsetTop - smallItems[i].offsetHeight * 3;
          //   console.log(123);
          // }
          break;
        }
      }
    },
    //点击锚点
    chosePic(index) {
      // console.log(document.documentElement.scrollTop)
      // console.log(index);
      // const bigPic = document.getElementsByClassName("bigPic")[0]; //需要指定的最左侧小预览图
      // // console.log(bigPic.clientHeight, 123);

      // document.documentElement.scrollTop = bigPic.clientHeight * index;
      // this.pic_id = index;
      const items = document.querySelectorAll(".bigPic");
      for (let i = 0; i < items.length; i++) {
        if (index == i) {
          items[i].scrollIntoView({
            block: "center",
            behavior: "smooth",
            inline: "center",
          });
        }
      }
      // this.pic_id = index;
    },
    onScroll(e) {
      console.log(e);
      const scrollItems = document.querySelectorAll(".pptRight");
      // for (let i = scrollItems.length - 1; i >= 0; i--) {
      //   // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
      //   let judge =
      //     e.target.scrollTop >=
      //     scrollItems[i].offsetTop - scrollItems[0].offsetTop;
      //   if (judge) {
      //     this.pic_id = i;
      //     break;
      //   }
      //   console.log(this.pic_id)
      // }
    },
    //获取文件下载链接
    downLoad() {
      if (this.loginStatus == 0) {
        this.dialogVisible = true;
      } else {
        getgroupbuyuserinfo({
          md5key: localStorage.getItem("md5key"),
          phone:this.account,
          row_id:this.kejianid,
          nr_type_id:2,
        }).then(res=>{
          if(res.retRes.is_imp && res.retRes.is_imp == 1){
            this.getDownUrl();
          }else{
            if(this.is_sf == 0) {
              this.getDownUrl();
            } else if (this.is_sf == 1 &&(this.gm_status == 0 || this.is_pay !=1) && this.is_free != 1) {
              this.fwbtjShow = true
              page_times({
                table_name: "goods_tk",
                row_id: this.goods_id,
              });
            } else if (this.is_sf == 1 && this.gm_status == 1 && this.is_pay == 1) {
              this.getDownUrl();
            }else if (this.is_sf == 1 &&(this.gm_status == 0 || this.is_pay !=1) && this.is_free == 1) {
              this.getDownUrl();
            }
          }
        })
      }
    },
    //获取当前已选中课件的下载链接数组
    getDownUrl() {
      const idArr = []
      idArr.push(this.kejianid)
      download_nums({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id: this.kejianbao_id,
        kejian_ids:idArr,
      }).then((res) => {
        if (res.retInt == 1 && res.retRes.xz_status == 1) {
          url_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            console.log(res);
            // window.open(res.retRes.download_file_url, "_blank");
            if (res.retInt == 1) {
              let url = res.retRes.download_file_url;
              const a = document.createElement("a");
              a.href = url;
              a.download = res.retRes.title;
              a.style.display = "none";
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              // this.zykf_file_url = this.kefuMsg.zykf_file_url;
              setTimeout(() => {
                qywx_status({
                  md5key: localStorage.getItem("md5key"),
                  // kf_account: this.kefuMsg.zykf_account,
                }).then((res) => {
                  console.log(res);
                  if (res.retRes.qywx_status == 0) {
                    this.xzMsg.is_qw = 0;
                    ffzyb_status({
                      md5key: localStorage.getItem("md5key"),
                    }).then((res) => {
                      if (res.retRes.is_dy == 1) {
                        //未订阅 资源客服2二维码
                        this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                        this.downQwShow = true;
                      } else {
                        //已订阅 资源客服1二维码
                        this.zykf_file_url = this.kefuMsg.zykf_file_url;
                        this.downQwShow = true;
                      }
                    });
                  }else{
                    this.xzMsg.is_qw = 1;
                    this.downQwShow = true;
                  }
                });
              }, 1500);
            }
          });
        } else {
          ffzyb_status({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            if (res.retRes.is_dy == 1) {
              //未订阅 资源客服2二维码
              this.zykf_file_url = this.kefuMsg.zykf1_file_url;
              this.xzxxShow = true;
            } else {
              //已订阅 资源客服1二维码
              this.zykf_file_url = this.kefuMsg.zykf_file_url;
              this.xzxxShow = true;
            }
          });
          // this.zykf_file_url = this.kefuMsg.zykf_file_url;
          // this.xzxxShow = true;
        }
      });
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.downQwShow = false;
    },
    //点击课件前往课件详情
    goresDetails(id, lx, suffix) {
      console.log(id, lx, suffix);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2) {
        this.$router.push({
          name: "Beikeziyuan",
          query: {
            id: id,
            path: this.routeurl,
            routeName: this.routeName,
          },
        });
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix != "zip" && suffix != "rar") {
        console.log("kejian ");
        // console.log("推荐课件")
        this.$router.push({
          name: "ResDetails",
          query: {
            id: id,
            path: this.routeurl,
            routeName: this.routeName,
          },
        });
        this.reload(); //刷新页面
        //非推荐，全部为正常课件
      } else if (suffix == "zip" || suffix == "rar") {
        this.$router.push({
          name: "ZipResDetails",
          query: {
            id: id,
            path: this.routeurl,
            routeName: this.routeName,
            isFree:this.is_free == 1?this.is_free:0
          },
        });
        this.reload(); //刷新页面
      }
    },
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //关闭付费弹窗
    fufeiClose() {
      this.dialogVisible_fufei = false;
    },
    //关闭兑换码弹窗
    duihuanClose() {
      this.dialogVisible_duihuan = false;
    },
    //关闭下载限制弹窗
    xzxxClose() {
      this.xzxxShow = false;
    },
    
    //前往账号登录
    goLogin() {
      this.$router.push({
        name: "Login",
        query: {
          zhanghao: 1,
        },
      });
    },
    //兑换码解锁
    jsmJs() {
      console.log(this.jsm);
      if (!this.jsm) {
        this.$message({
          message: "请输入正确的兑换码！",
          type: "warning",
        });
      } else {
        sy_goodsjsm({
          md5key: localStorage.getItem("md5key"),
          numbers: this.jsm,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message.success("解锁成功！");
            this.reload();
          } else {
            this.$message({
              message: res.retErr,
              type: "warning",
            });
          }
        });
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.pageTimer);
    this.pageTimer = null;

    window.removeEventListener("scroll", this.handleScrollY, true);
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f0f5;
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .nowAdreess {
        display: inline-block;
        // width: 90px;
      }
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 350px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      display: flex;
      align-items: center;
      background-color: #fff;
      .beike {
        display: flex;
        align-items: center;
        padding: 20px;
        // margin-bottom: 20px;
        width: 1200px;
        // height: 150px;
        background-color: #fff;
        img {
          // margin: 0px 20px 0 20px;
          margin: 0 20px;
          margin-right: 30px;
          width: 74px;
          height: 84px;
        }
        .details {
          width: 775px;
          // padding-top: 20px;
          .title {
            display: flex;
            align-items: center;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              margin-right: 10px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            img{
              position: relative;
              top: 2px;
              margin: 0;
              height: auto;
              width: 40px;
            }
            h3 {
              // margin-left: 10px;
              // margin-top: 22px;
              max-width: 670px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .money {
              display: flex;
              margin-left: 5px;
              img {
                position: relative;
                top: 2px;
                margin: 0;
                margin-right: 5px;
                width: 12px;
                height: 12px;
              }
              color: #11aaf9;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            .intro {
              max-height: 72px;
              overflow: hidden;
              p {
                height: 24px;
              }
            }
            .bottom {
              display: flex;
              align-items: center;
              margin-top: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
      }
      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 50px;
        cursor: pointer;
        width: 100px;
        i {
          margin-bottom: 5px;
          font-size: 28px;
          color: #c8cacc;
        }
        img{
          margin-bottom: 5px;
          width: 28px;
          height: 28px;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
      .getsc {
        i {
          background-color: linear-gradient(-45deg, #7defcf, #05bc89);
          color: #05bc89;
        }
        p {
          color: #08a579;
        }
      }
      .pl{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 50px;
        cursor: pointer;
        width: 160px;
        img{
          margin-bottom: 5px;
          width: 28px;
          height: 28px;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }
  .content {
    display: flex;
    margin-bottom: 20px;
    width: 1200px;
    margin: 20px auto;
    .left {
      position: relative;
      width: 820px;
      // margin-right: 20px;
      // width: 820px;
      background-color: #fff;
      border: 1px solid #dee0e3;
      border-bottom: 0;
      .pptTop {
        position: static;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        width: 820px;
        background-color: #fff;
        border-bottom: 1px solid #dee0e3;
        font-size: 14px;
        z-index: 1000;
        span {
          margin-left: 14px;
          color: #333;
        }
        .progress {
          margin-right: 20px;
          color: #969799;
        }
      }
      .pptLeft {
        position: absolute;
        .smallPic {
          text-align: center;
          width: 120px;
          background-color: #fff;
          // border: 1px solid #dee0e3;
          border-right: 1px solid #dee0e3;
          border-bottom: 1px solid #dee0e3;
          border-top: 0;
          height: 75vh;
          -ms-overflow-style: none; /* IE 10+ */
          scrollbar-width: none; /* Firefox */
          overflow-y: scroll;
          img {
            width: 100px;
            // height: 53px;
            border-radius: 4px;
            object-fit: cover;
          }
        }
        ::-webkit-scrollbar {
          width: 4px;
        }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.1);
          background: #d4d4d4;
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
        .choseImg {
          border: 3px solid #08a579;
        }
      }
      .pptRight {
        // margin-top: 80px;
        margin-left: 120px;
        // overflow: scroll-y;
        .bigPic {
          // overflow: scroll;

          img {
            width: 700px;
            object-fit: cover;
          }
          .mp3File {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 448px;
            img {
              margin-top: 100px;
              width: 74px;
              height: 84px;
            }
            p {
              margin-top: 15px;
              font-size: 16px;
            }
            audio {
              margin-top: 60px;
              width: 600px;
            }
          }
        }
        // height: 895px;
        // -ms-overflow-style: none; /* IE 10+ */
        // scrollbar-width: none; /* Firefox */
        // overflow-y: scroll;

        // ::-webkit-scrollbar {
        //   display: none; /* Chrome Safari */
        // }
        .jindu {
          position: absolute;
          bottom: 120px;
          width: 700px;
          height: 50px;
          line-height: 50px;

          text-align: center;
          background-image: linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0),
            #fff 86%
          );
        }
        .jindutext {
          text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 14px;
          color: #999;
        }
        .downlond {
          position: fixed;
          bottom: 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: sticky;
          bottom: 0px;
          width: 699px;
          height: 60px;
          background: #ffffff;
          border: 1px solid #dee0e3;
          cursor: pointer;
          span {
            margin-left: 20px;
            width: 430px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #646566;
          }
          .fufei {
            display: flex;
            span {
              width: 88px;
            }
            .baoLists {
              font-size: 14px;
              color: #646566;
            }
          }
          .downFile {
            margin-right: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
          }
        }
      }
    }
    .noFile {
      position: relative;
      p {
        margin-bottom: 500px;
        margin-top: 100px;
        font-size: 16px;
        text-align: center;
      }
      .downlond {
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        bottom: 0px;
        width: 819px;
        height: 60px;
        background: #ffffff;
        border: 1px solid #dee0e3;
        cursor: pointer;
        span {
          margin-left: 20px;
          width: 430px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          color: #646566;
        }
        .downFile {
          margin-right: 20px;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          width: 120px;
          height: 40px;
          background: #08a579;
          border-radius: 4px;
        }
      }
    }
    .right {
      overflow: hidden;
      margin-left: 20px;
      .righttop {
        margin-bottom: 20px;
        width: 360px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .title2 {
          display: flex;
          margin-top: 20px;
          span {
            display: inline-block;
            position: relative;
            top: 5px;
            width: 4px;
            height: 20px;
            background: #08a579;
            border-radius: 2px;
          }
          h2 {
            margin-left: 10px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
        }
        #box {
          display: flex;
          margin: 20px;
          padding-bottom: 20px;
          border-bottom: 1px dashed #ccc;
          cursor: pointer;
          img {
            width: 60px;
          }
          .msg {
            position: relative;
            margin-left: 15px;
            .title {
              margin-bottom: 5px;
              font-size: 14px;
              // font-weight: 900;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #333;
              img {
                position: relative;
                top: 3px;
                margin: 0 5px;
                width: auto;
                height: 14px;
              }
            }
            p {
              min-height: 36px;
              font-size: 12px;
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              a {
                color: red;
              }
            }
            .bottom {
              position: absolute;
              bottom: -4px;
              // top: 24px;
              display: flex;
              align-items: center;
              color: #939599;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                color: #939599;
                margin-left: 10px;
                i {
                  margin-right: 5px;
                }
              }
              .rate {
                display: flex;
                margin-right: 10px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
            }
          }
        }
        .cannotsee{
          margin-bottom: 200px;
          text-align: center;
          img{
            margin-top: 20px;
            width: 400px;
          }
          p{
            color: #666;
            font-size: 16px;
          }
        }
      }
      .rightbottom {
        position: static;
        top: 10px;
        width: 360px;
        height: 460px;
        background: #ffffff;
        overflow: hidden;
        .title2 {
          display: flex;
          margin-top: 20px;
          span {
            display: inline-block;
            position: relative;
            top: 5px;
            width: 4px;
            height: 20px;
            background: #08a579;
            border-radius: 2px;
          }
          h3 {
            margin-left: 10px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
        }
        .box {
          text-align: center;
          .pic {
            margin-bottom: 20px;
            text-align: center;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            img {
              margin-top: 40px;
              // width: 100px;
              height: 133px;
              object-fit: cover;
            }
          }
          h3 {
            margin: 0 auto;
            margin-bottom: 20px;
            width: 218px;
            font-size: 14px;
            color: #333;
          }
          p {
            margin: 0 auto;
            margin-bottom: 30px;
            width: 321px;
            font-size: 14px;
            color: #939599;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          span {
            display: inline-block;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .guanggao {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    cursor: pointer;
    .banner {
      margin: 0px auto;
      width: 100%;
      .el-carousel {
        width: 100%;
        height: 160px;
        // border-radius: 20px;
        .el-carousel__item {
          width: 100%;
          height: 160px;
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
  .pinglun{
    width: 1200px;
    margin: 20px auto;
    background: #FFF;
    .plTop{
      display: flex;
      align-items: center;
      height: 56px;
      border-bottom: 1px solid #E6E6E6;
      h4{
        margin-right: 20px;
        margin-left: 20px;
        font-size: 16px;
        color: #333333;
        font-weight: normal;
      }
      .xie{
        position: relative;
      }
      span{
        display: inline-block;
        text-align: center;
        width: 96px;
        height: 28px;
        background: #08A579;
        border-radius: 4px;
        color: #FFF;
        font-size: 14px;
        line-height: 28px;
        cursor: pointer;
        user-select: none;
      }
      span:active{
        opacity: .8;
      }
      img{
        position: absolute;
        top: -10px;
        left: 56px;
        width: 64px;
      }
    }
    .plLists{
      display: flex;
      flex-direction: column;
      .list{
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #E6E6E6;
        .tec{
          display: flex;
          align-items: center;
          margin-left: 20px;
          margin-top: 20px;
          .tx{
            margin-right: 10px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            img{
              width: 100%;
              border-radius: 50%;
            }
          }
          .msg{
            display: flex;
            flex-direction: column;
            h4{
              margin-left: 2px;
              color: #333333;
              font-size: 16px;
              font-weight: 400;
              line-height: 44px;
            }
            .rate {
              display: flex;
              align-items: center;
              /deep/.el-rate__icon {
                margin-right: 0;
                font-size: 20px;
              }
              .riqi{
                margin-left: 16px;
                font-size: 12px;
                color: #999999;
              }
            }
            
          }
        }
        .msgcnt{
          p{
            margin: 20px;
            color: #333333;
            font-size: 14px;
          }
        }
      }
    }
    .nopl{
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        margin-bottom: 30px;
        width: 280px;
      }
      p{
        font-size: 16px;
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    margin-right: 10px;
    color: #c0c1c5;
    font-size: 18px;
    font-weight: 600;
  }
  /deep/.el-dialog__headerbtn {
    right: 36px;
  }
  .login {
    text-align: center;
    .tcTop {
      margin-bottom: 32px;
      text-align: center;
    }
    .dlevm {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 240px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    p {
      margin-top: 16px;
      margin-bottom: 35px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .gologin {
      margin: 0 auto;
      text-align: center;
      width: 400px;
      height: 60px;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background: rgba(242, 237, 237, 0);
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
    }
  }
  .Gmoney {
    /deep/.el-dialog {
    }
    h2 {
      text-align: center;
      font-size: 24px;
      a {
        color: #f6444e;
      }
    }
    .fangshi {
      display: flex;
      // justify-content: space-around;
      margin-top: 60px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        margin-right: 100px;
        margin-left: 80px;
        .pic {
          width: 200px;
          height: 200px;
          img {
            width: 100%;
          }
        }
        h4 {
          margin-top: 10px;
          font-size: 16px;
          color: #333;
        }
        p {
          margin-top: 12px;
          font-size: 14px;
          color: #999999;
          a {
            color: #f6444e;
          }
        }
      }
      .center,
      .right {
        position: relative;
        width: 240px;
        height: 260px;
        background: #f5faf8;
        border: 2px solid #08a579;
        border-radius: 12px;
        .top {
          display: flex;
          margin: 22px 0 20px 26px;
          img {
            position: relative;
            top: 1px;
            margin-right: 5px;
            width: 20px;
            object-fit: contain;
          }
          h3 {
            font-size: 16px;
            color: #333;
          }
        }
        p {
          margin-left: 26px;
          font-size: 14px;
          width: 183px;
          color: #666;
          line-height: 22px;
        }
        a {
          display: inline-block;
          margin-left: 26px;
          margin-top: 12px;
          text-decoration: underline;
          color: #08a579;
        }
        .moneyJs,
        .numberJs {
          position: absolute;
          bottom: 26px;
          margin-left: 60px;
          text-align: center;
          line-height: 40px;
          width: 120px;
          height: 40px;
          color: #fff;
          font-size: 14px;
          background: #08a579;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .center {
        margin-right: 40px;
      }
    }
  }
  .duihuan {
    /deep/.el-dialog__body {
      padding: 0 20px;
    }
    /deep/.el-dialog__header {
      padding-top: 10px;
    }
    h2 {
      margin-bottom: 40px;
      text-align: center;
      font-size: 18px;
      color: #333;
    }
    .shuru {
      margin: 0 auto;
      margin-bottom: 40px;
      width: 280px;
      height: 54px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      input {
        width: 270px;
        height: 52px;
        font-size: 14px;
        text-align: center;
        border: 0;
        outline: none;
      }
    }
    .sureJs {
      margin-left: 100px;
      margin-bottom: 38px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>